<template>
  <div class="contanier">
    <p>store count: {{ $store.state.count }}</p>
    <h1>我的</h1>
    <button @click="goBack">&lt;返回</button>
    <button @click="goBackEvent">&lt;replace返回</button>

    <!-- 后退不要使用router-link后退，使用this.$router.go(-1)。前进可以使用router-link，也可以使用this.$router.push()。 -->
    <!-- <router-link to="/home">&lt;返回</router-link> -->

    <div class="links">
      <router-link :to="{ name: 'dcone' }">大触直播</router-link>
      <router-link :to="{ name: 'dctwo' }">大触专访</router-link>
      <router-link :to="{ name: 'dcthree' }">大触周边</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "MyView",

  data() {
    return {};
  },
  created() {
    // console.log("==", this.$route);
  },
  methods: {
    goBack() {
      // go(): 可以负责前进和后退。
      this.$router.go(-1);
    },
    goBackEvent() {
      // this.$router.replace("/home");
      this.$router.replace({
        name: "home",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.links {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  a {
    text-decoration: none;
  }
}
</style>
